<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>将字符串顺序重新排序DOM节点</title>
</head>

<body>
  <!-- 将下面的列表按照 a-z 的顺序排序 -->
  <ol id="test-list">
      <li class="lang">Scheme</li>
      <li class="lang">JavaScript</li>
      <li class="lang">Python</li>
      <li class="lang">Ruby</li>
      <li class="lang">Haskell</li>
  </ol>
  <script>
    //获取父节点
    var list = document.getElementById("test-list");
    var arr = [];
    //将父节点的孩子放进array数组中，js中数组元素的类型可以任意，这里数组元素类型为DOM节点
    for (let i = 0; i < list.children.length; i++) {
      arr.push(list.children[i]);
    }
    //利用高阶函数sort()对数组排序，排序规则自定义一个函数传给sort
    //题目要求根据节点的文本内容按照字符串顺序排序
    arr.sort(function (x, y) {
      if (x.innerText > y.innerText) {
        return 1;
      } else if (x.innerText < y.innerText) {
        return -1;
      } else {
        return 0;
      }
    });
    //将节点添插入父节点的中

    // 因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。
    for (let i = 0; i < arr.length; i++) {
      list.appendChild(arr[i])
    }
  </script>
</body>
</html>